<template>
	<view>
		<nav-custom></nav-custom>
		<scroll-view :scroll-into-view="topItem" scroll-with-animation @scroll="handleScroll" class="main" scroll-y="true" >
			<view>
				<view id="top"></view>
				<swiper class="banner" :indicator-dots="true" indicator-active-color="orange" >
					<swiper-item>
						<view class="swiper-item">
							<image src="https://file2201.hiweixiu.top/i791GzYnE15QD4slv6VW7UOlAr8dbopH/banner2.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="https://file2201.hiweixiu.top/ShfNbHxDw2DOIHvNrOSOF2OjewPgXV0c/banner1.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- #ifdef MP-WEIXIN -->
				<view class="cu-list grid col-4">
					<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- #endif -->
				<home-title ctit="本季推荐" entit="Seasonal Recommend" :more="false"></home-title>
				<scroll-view scroll-x class="recommend">
					<view class="flex">
						<image src="https://file2201.hiweixiu.top/FeouurbHS57zHLvkCtl1flsKHEHlbeWM/4078f0688fd4a7d9.jpg" mode="heightFix"></image>
						<image src="https://file2201.hiweixiu.top/c2dRfk2eVCjETUlSuiK68YShJOMDkj0o/89591b09234c0f70.jpg" mode="heightFix"></image>
						<image src="https://file2201.hiweixiu.top/JD0iwjqd8vUf2G5rd4xgudMDdavjiVBU/182e63e229f79da3.jpg" mode="heightFix"></image>
					</view>
				</scroll-view>
				<home-title></home-title>
				<image class="cate-img" src="https://file2201.hiweixiu.top/bxRvIkilMb2lKB3JNLjKMCRcIDX0mB5p/15c31d4729a3eecc%20%281%29.jpg" mode="widthFix"></image>
				<view class="cake-cont">
					<cake-item
						v-for="(item,index) in cakelist" 
						:cake-data="item"
						:cake-idx="index"
					/>
				</view>
			</view>
		</scroll-view>
		<view class="back-top" v-if="backShow" @click="handleBack">
			<text class="iconfont icon-tubiao_fanhuidingbu"></text>
		</view>
	</view>
</template>

<script>
	import NavCustom from '@/components/nav-custom.vue'
	import {cakeGet} from '../../api/cake.js'
	export default {
		components: {
			'nav-custom':NavCustom
		},
		data() {
			return {
				backShow:false,
				topItem:'',  //让scroll-view滚动到指定id的元素位置
				cakelist:[],
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}],
			};
		},
		onLoad() { // 页面中推荐使用这个
			console.log('Home页面的onLoad');
			cakeGet().then(res=>{
				this.cakelist = res.data.results
			})
		},
		// created() { //可以执行，但不推荐使用
		// 	console.log('Home页面的created');
		// }
		methods: {
			handleScroll(ev) {
				console.log(ev);
				let {scrollTop} = ev.detail
				this.backShow = scrollTop>500
				if(scrollTop>500){
					this.topItem = ''
				}
			},
			handleBack(){
				this.topItem = 'top'
			}
		},
	}
</script>

<style lang="scss">
.banner{
	height: 1000upx;
}
.recommend{
	image{
		height: 290upx;
		flex-shrink: 0;
	}
}
.cate-img{
	height: 340upx;
	width: 100%;
}
.back-top{
	position: fixed;
	bottom: 140upx;
	right: 20upx;
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
	background-color: #fff;
	text-align: center;
	line-height: 100upx;
}
.main{
	// border: 1px solid red;
	box-sizing: border-box;
	height: 100vh;
}
</style>
